<template>
	<div class='user'>	
		<h3>教师列表</h3>
		<ul>
			<li v-for="teacher in teachers">
				<h4 v-rainbow>{{teacher.name}}</h4>
				<h4>{{teacher.website}}</h4>
				<button v-on:click="deletUser(user)">删除</button>
			</li>
		</ul>
		<form action="" method="get" v-on:submit="addUser">
			<fieldset>
				<legend>添加教师信息</legend>
				姓名：<input type="text" placeholder="请添加用户名" v-model="newUser.name">
				网址：<input type="text" v-model="newUser.website"><br>	
				<input type="submit" value="提交" />
			</fieldset>
		</form>	
	</div>
</template>
<script>
	export default {
		name: 'app-user',
		data() {
			return {
				info: null,
				newUser:{},
				teachers:[
				{
						name: '初识Vue.js',
						website: 'Dalian',
						show: true
					},
				],

			}
		},
		methods:{
			addUser:function(e){
				e.preventDefault();
				//console.log('hello');
				this.teachers.push({
					name:this.newUser.name,
					website:this.newUser.website,
					show:true,
				});
			},
			deletUser:function(user){
				this.teachers.splice(this.teachers.indexOf(user),1);				
			}
		},
	 mounted () {
    this.$axios
      .get('http://jsonplaceholder.typicode.com/users')
      .then(response => (this.teachers = response.data))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
	}
</script>

<style>
	.user {
		border: 1px solid gray;
		width: 80%;
		margin: 20px auto;
		padding-bottom: 10px;
	}
	
	.user ul {
		list-style-type: none;
	}
	
	.user li {
		width: 33%;
		float: left;
		text-align: center;
		border: solid 1px green;
		height: 100px;
	}
	
	.user h3,legend {
		color: red;
		font-size: 20px;
		font-weight: bold;
	}
	input[type=text]{
		width: 20%;
	}
	.user form{
		clear: both;
		padding-top: 20px;
	}
</style>